<template>
  <div>
    <Row class="expand-row">
      <i-col span="24">
        <strong>布局块ID：</strong><span>{{layoutItem.id}} <Icon type="md-copy" style="cursor: pointer;" @click="copyText(layoutItem.id)"/></span>
      </i-col>
    </Row>
    <Row class="expand-row">
      <i-col span="12">
        <strong>自定义Class：</strong><span>{{layoutItem.className}} <Icon v-if="layoutItem.className" type="md-copy" style="cursor: pointer;" @click="copyText(layoutItem.className)"/></span>
      </i-col>
    </Row>
  </div>
</template>

<script>

import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

import _ from 'lodash'

export default {
  name: "LayoutItemSearchExpandRow",
  props: {
    row: Object
  },
  data() {
    return {
      layoutItem: {}
    }
  },
  mounted() {
    this.layoutItem = _.find(this.layoutItems, (o) => {
      return o.id == this.row.value
    })
  },
  methods: {
    copyText (cont) {
      this.$PnUtil.copyToClipboard(cont);
      this.$Message.success('文本【'+cont+'】复制成功')
    }
  },
  computed: {
    ...mapFields({
      layoutItems: 'pageMetadata.layout.layoutItems'
    }),
  },
  watch: {}
}
</script>

<style scoped>
.expand-row{
  margin-bottom: 10px;
}
</style>
